import React, {Component} from 'react'
import Dimensions from 'react-dimensions'
import {fetchData} from '../../../components/AjaxConsumer'
import SelectUrl from '../../../components/SelectUrl'
import moment from 'moment';
import {
    Form,
    Input,
    Tooltip,
    Icon,
    Row,
    Col,
    Checkbox,
    Button,
    message,
    Modal,
    Radio,
    Select
} from 'antd';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
// 主要表单组件
class SelfForm extends React.Component {
    constructor(props) {
		super(props);
		this.state = {
            loading: false,
            confirmDirty: false,
            //按顺序传入的“优先级”
            rowArr: this.props.getData,
            odsProStorageSnId:'',
            lockProp:'',
            proBarcode:'',
            wlCode:'',
            materialCode:'',
            materialSecd:'',
            proOwner:'',
            orderNo:'',
            proInDate:'',
            proManuDate:'',
            batchNo:'',
            stauts:'',
            lockReason:'',
            cancelFlag:'',
            cancelTime:'',
        };
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
                if (!err) {
                    this.setState({loading: true});
                    //将fieldsValue深拷贝给value
                    let values = {
                        ...fieldsValue,
                    };
                    //发送ajax 控制请求数据规则，无值的设为空
                    for (let item in values) {
                        if (!values[item]) {
                            values[item] = ''
                        }
                    }
                    //打印表单提交的值
                    this.state.rowArr.lockProp=values.first1Rank
                    //在这里可以改造传给服务器的   values
                    let res = [...this.state]
                    const options = {
                        //服务器的url
                        url: '/wmsrest/product/odsprostoragesn/u',
                        type: 'post',
                        condition: //{
                            //values
                        this.state.rowArr
                        //}
                    };
                    fetchData(this, options, (res) => {
                        //回调函数
                        if (res.code == 1) {
                            message.success('操作成功');
                        }
                        setTimeout(() => {
                            // this.resetFrom();
                            this.props.onCancel();
                            this.setState({loading: false})
                            // console.log("刷新List列表")
                            this.props.refreshHandle();
                        }, 1000); //缓冲
                        
                    })
                }
            });
    }


    render() {
        const {getFieldDecorator} = this.props.form;
        const headerStyle = {
            float: 'left',
            width: '100px',
            height: '33px',
            textAlign: 'center',
            lineHeight: '33px',
            fontSize: '14px',
            border: '1px solid #999'
            // lineHeight: '50px'
        }
        const headerStyle2 = {
            float: 'left',
            width: '100px',
            height: '33px',
            textAlign: 'center',
            lineHeight: '33px',
            fontSize: '14px',
            border: '1px solid #999',
            backgroundColor:'#e9e9e9'
            // lineHeight: '50px'
        }
        let tmpRowArr = [];
        tmpRowArr.push(this.state.rowArr);
        let rowArr = tmpRowArr.map((e,index)=>{
            return (
                <div style={{width:'800px'}} key={index}>
                    <div style={headerStyle}>{e.proBarcode}</div>
                    <div style={headerStyle}>{e.wlCode}</div>
                    <div style={headerStyle}>
                        <FormItem
                            style={{width:'100%'}}
                        >
                            {getFieldDecorator('first'+(index+1)+'Rank', {
                                initialValue: e.status,
                                rules: [
                                    // {required: true, message:'请填写完整相应的表单'},
                                ],
                            })(
                                <Select
                                    style={{width:'100%',color:'#000'}}
                                    onChange={this.handleChange}
                                >
                                    <Option  value={'0'}>可用</Option>
                                    <Option  value={'1'}>冻结</Option>
                                    <Option  value={'2'}>已出库</Option>
                                    <Option  value={'3'}>抽检冻结</Option>
                                </Select>
                            )}
                        </FormItem>
                    </div>
                    <div style={headerStyle}>{e.orderNo}</div>
                    <div style={headerStyle}>{e.batchNo}</div>
                    <div style={headerStyle}>{e.proInDate}</div>
                    <div style={headerStyle}>{e.proInDate}</div>
                    <div style={headerStyle}>{e.lockReason}</div>

                    
                </div>

            )
        })
        return (
            <Form
                onSubmit={this.handleSubmit}
                style={{
                backgroundColor: '#fff',
                paddingTop: '20px',
                paddingBottom: '20px'
            }}>
            <div style={{width:'800px',height:'auto',margin:'0 auto'}}>
                
                <div style={headerStyle2}>条码</div>
                <div style={headerStyle2}>库位</div>
                <div style={headerStyle2}>库存状态</div>
                <div style={headerStyle2}>入库单号</div>
                <div style={headerStyle2}>批次</div>
                <div style={headerStyle2}>入库时间</div>
                <div style={headerStyle2}>库龄</div>
                <div style={headerStyle2}>冻结原因</div>
                {rowArr}
                <div style={{width:'250px', height:'auto', clear:'both', padding:'20px 0', margin:'0px auto'}}>
                    <Button type="primary" htmlType="submit" size="large" >
                        {this.state.loading?'提交中...':'确定'}
                    </Button>
                    <Button type="default" style={{marginLeft: '50px'}} size="large" onClick={()=>this.props.onCancel()}>
                        取消
                    </Button>
                </div>
            </div>
            </Form>
        );
    }
}
let MyForm = Form.create()(SelfForm);
export default class UpdatePage extends Component {
    constructor(props) {
		super(props);
		this.state = {
            loading: false,
            visible: false,
        };
        
    }
    handleOk = () => {
        // let result = this.state.resData;
        this.setState({
            visible: false,
        });
        this.refreshHandle();
    }

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }

    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }
    // (外部调用)
    editHandle = (rowObj) => {
        // console.log('----------',rowObj);
        this.setState({
            resData: rowObj,
            odsProStorageSnId:rowObj.odsProStorageSnId,
            visible: true,

        });
    }
    editGetInfoCallBack = (resData) =>{
        this.setState({
            resData: resData.data,
            visible: true,
        });
    }
    render() {
        return (
            <Modal
                    style={{top: '20px'}}
                    visible={this.state.visible}
                    title={'冻结设置'}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={'1050px'}
                    footer=''
                    maskClosable={false}
                    key={Math.random()}
                >
                    <MyForm 
                        getData={this.state.resData}
                        onCancel={this.handleCancel}
                        refreshHandle = {this.refreshHandle}
                     />
            </Modal>
        );
    }
}


